<template>
	<view class="main-box" v-if="!isVerify">
		<view class="head-box">
			<view class="left">
				<image class="head-img" mode="widthFix"
					src="https://h5.sx2b2c.com/images/xima_laya/index/people-icon.png">
				</image>
				<view v-if="!isLogin" class="login-box" @click="isShowLogin = true">
					请登录
					<image class="login-btn" mode="widthFix"
						src="https://h5.sx2b2c.com/images/xima_laya/index/login-btn.png"></image>
				</view>
				<view v-if="isLogin" class="login-mobile">{{mobile}}</view>
			</view>
			<view v-if="isLogin" class="right">
				<view class="login-out" @click="loginOut">退出登录</view>
			</view>
		</view>
		<image @click="gotoExplain" class="banner" mode="widthFix"
			src="https://h5.sx2b2c.com/images/xima_laya/index/banner1.png"></image>
		<image class="banner" mode="widthFix" src="https://h5.sx2b2c.com/images/xima_laya/index/banner2.png"></image>
		<image class="banner" mode="widthFix" src="https://h5.sx2b2c.com/images/xima_laya/index/banner3.png"></image>
		<image class="banner" mode="widthFix" src="https://h5.sx2b2c.com/images/xima_laya/index/banner4.png"></image>
		<image class="banner" mode="widthFix" src="https://h5.sx2b2c.com/images/xima_laya/index/banner5.png"></image>
		<image class="banner" mode="widthFix" src="https://h5.sx2b2c.com/images/xima_laya/index/banner6.png"></image>
		<xmly-login v-if="isShowLogin" @success="loginSuccessHandler" @cancel="isShowLogin = false"></xmly-login>
	</view>
	<view v-else style="height: 100vh;display: flex;justify-content: center;align-items: center;color: #00000;">
		该功能暂未开通
	</view>
</template>

<script>
	import commonApi from '../../api/commonApi';
	import userApi from '../../api/userApi';
	import ximaLayaShengHeApi from '../../api/ximaLayaShengHeApi';
	import httpUtil from '../../utils/httpUtil';
	import messageUtil from '../../utils/messageUtil';
	export default {
		data() {
			return {
				isVerify: false,
				isShowLogin: false,
				mobile: '',
				openId: '',
			};
		},
		onLoad(option) {
			this.initData(option)
		},
		computed: {
			isLogin: function() {
				if (this.openId.length > 0) {
					return true;
				}
				return false;
			}
		},
		methods: {
			gotoExplain() {
				if (!this.openId) {
					messageUtil.showFail('请先登录')
					return;
				}
				uni.navigateTo({
					url: '/pages/ximaLayaExplain/ximaLayaExplain'
				})
			},
			initData(option) {
				//todo 测试使用
				// httpUtil.setA('c4cb3893b76a41b08cffa288df2745f4')
				if (option.a) {
					httpUtil.setA(option.a)
				}
				if (option.param) {
					ximaLayaShengHeApi.setParam(option.param)
				}
				userApi.getMiniLoginCode(code => {
					userApi.initUserId(code, res => {
						ximaLayaShengHeApi.buriedPoint()
					})
				})

				this.initUserInfo()
				commonApi.isVerify(res => {
					this.isVerify = res
				})
				commonApi.is404()
			},
			initUserInfo() {
				if (ximaLayaShengHeApi.getOpenId()) {
					this.openId = ximaLayaShengHeApi.getOpenId()
				}
				if (ximaLayaShengHeApi.getMobile()) {
					this.mobile = ximaLayaShengHeApi.getMobile()
				}
			},
			loginSuccessHandler() {
				this.initUserInfo()
				this.isShowLogin = false
			},
			loginOut() {

				this.mobile = ''
				this.openId = ''
				ximaLayaShengHeApi.setMobile(null)
				ximaLayaShengHeApi.setOpenId(null)
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		padding: 20rpx 13rpx;
	}

	.head-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			align-items: center;

			.head-img {
				width: 79rpx;
				height: auto;
				background: #FDF4C6;
				border: 1px solid #FFFEFC;
				border-radius: 50%;
			}

			.login-box {
				height: 79rpx;
				margin-left: 11rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;

				.login-btn {
					width: 79rpx;
					height: auto;

				}
			}

			.login-mobile {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
				margin-left: 11rpx;
			}
		}

		.login-out {
			width: 97rpx;
			height: 36rpx;
			line-height: 36rpx;
			border: 1px solid #000000;
			border-radius: 2rpx;
			font-size: 19rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			text-align: center;
		}
	}

	.banner {
		width: 100%;
		height: auto;
		margin-top: 20rpx;
	}
</style>